class User{
    constructor(){
        this.session=sessionStorage.getItem("user")?JSON.parse(sessionStorage.getItem("user")):{};
        console.log(this.session);
        this.li=$("#list").children("li").eq(0);
        this.login=$("#login");
        this.register=$("#register");
        this.welcome=$("#welcome");
        this.init();
        this.addEvent();
    }
    init(){
        if(this.session.user){
            this.welcome.html( `${this.session.user} <span class="iconfont icon-xjt"></span>`).css({
                display:"inline",
                borderRight:"1px solid #666"
            }).siblings("a").css("display","none");
            
            this.li.hover(()=>{
                $(".second_list").css("display","flex");
            },()=>{
                $(".second_list").css("display","none");
            });
            $("#exit").on("click",()=>{
               sessionStorage.removeItem("user");
               this.welcome.html("").css({
                display:"none",
                borderRight:"0"
            }).siblings("a").css("display","inline");
            })
             
        }else{
            this.welcome.html("").css({
                display:"none",
                borderRight:"0"
            }).siblings("a").css("display","inline");


        }
    }
    addEvent(){
       this.login.on("click",function(){
            $(this).attr("href","login.html");
        })
        this.register.on("click",function(){
            $(this).attr("href","register.html");
        
        })
        
    }
}
new User();
class detail{
    constructor(){
        this.color=$(".color").find("i");
        this.oback= $(".back");
        this.bigclass=$(".bigclass");
        this.fullcont=$(".fullcont");
        this.bigcont=$(".bigcont");
        this.biglist= $(".biglist");
        this.spic=$(".spic");
        this.spicInner=$(".spic_inner");
        this.bigImg=$(".bigImg").children("img");
        this.imgIndex=0;
        this.titlexd=$(".title_xd");
        this.botitle=$(".bo_title").eq(0);
        this.index=0;
        this.back();
        this.classify();
        this.list();
        this.addevent();
        this.init();
        this.clickSroll();
        this.clickChangeImg();
    }
    back(){
        this.oback.on("click",function(){
            var top=document.documentElement.scrollTop;
            $("html").animate({
                scrollTop:0
            })
        })
    }
    classify(){
        var that=this;
        this.bigclass.hover(function(){
            that.fullcont.css({
                display:"block"
            }).children(".bigcont").css("display","block")
        },function(){
            that.fullcont.css({
                display:"none"
            }).children(".bigcont").css("display","none");
        })
    
        this.bigcont.hover(function(){
            $(this).css("display","block");
        },function(){
            $(this).css("display","none");
        })
    
    
    }

    list(){
        for(let i=0;i<$(".lb").length;i++){
           $(".lb").eq(i).hover(()=>{
              this.biglist.css("display","block").children(".list_con"+i).css("display","block").siblings().css("display","none");
           })
        }
   
   }
   addevent(){
       var that=this;
       $(".icon-gwc").on("click",function(){
        location.href="cart.html";
    })

    this.color.on("click",function(){
        $(this).css({
            borderColor:"#8c5d3d",
            color:"#8c5d3d"
        }).siblings().css({
            borderColor:"#d6d6d6",
            color:"#333"
        })
    })
    document.onscroll=function(){
        if(document.documentElement.scrollTop>=470){
            $(".xd").css({
                display:"block",
                position:"fixed",
                top:"0",
                
            });
        } 
        else{
            $(".xd").css({
                display:"none"
            });
        }

        if(document.documentElement.scrollTop>=that.botitle.offset().top){
            that.titlexd.css({
                display:"block",
                position:"fixed",
                top:60,
                zIndex:3
            })
        }else{
            that.titlexd.css({
                display:"none"
            })
        }
    }
    this.spic.hover(function(){
       $(this).find($(".btn")).css({
           display:"block"
       })
    },function(){
        $(this).find($(".btn")).css({
            display:"none"
        })
    })
   }
   changeIndex(i){
       var that=this;
       if(i==-1){
        if(that.imgIndex==0){
            that.imgIndex=0;
        }else{
            that.imgIndex--;
            if(that.length-that.imgIndex>3){
                if(that.index==0){
                    that.index=0;
                }else{
                    that.index--;
                }
            }
        }
       }else {
            if(that.imgIndex==that.length-1){
                that.imgIndex=that.length-1;

            }else{
                that.imgIndex++;
                if(that.imgIndex>=3){
                    if(that.index==that.length-4){
                        that.index=that.length-4;
                    }else{
                        that.index++;
                    }
                }
            }
       }
   }
   clickSroll(){
       var that=this;
       console.log(this.spic.find(".top"))
       this.spic.find(".top").on("click",function(){
           that.changeIndex(-1);
        that.bigImgDisplay();
        that.imgBorder();
        that.move(-1);
       })
       this.spic.find(".bottom").on("click",function(){
           
        that.changeIndex(1);
        that.bigImgDisplay();
        that.imgBorder();
        that.move(1);
       })

   }
   bigImgDisplay(){
       this.bigImg.attr("src",this.spicInner.children("li").eq(this.imgIndex).children("img").attr("src"));
        
   }
   clickChangeImg(){
       var that=this;
       for(let i=0;i<this.length;i++){
           this.spicInner.children("li").eq(i).on("click",function(){
            if(i>that.imgIndex&&i>=3){
                that.changeIndex(1);
            }
            if(i<that.imgIndex&&that.imgIndex-i<=3){
                that.changeIndex(-1);
            }
            that.imgIndex=i;
            that.bigImgDisplay();
            that.imgBorder();
            that.move(-1);
           })
        
       }
   }
   init(){
       this.length=this.spicInner.children("li").length;
       this.spicInner.height(this.length*(this.spicInner.children("li").eq(0).height()+13));
       this.spicInner.children("li").eq(0).css({
           borderColor:"#845f3f"
       })
       this.bigImgDisplay();
   }
   imgBorder(){
       this.spicInner.children("li").eq(this.imgIndex).css({
           borderColor:"#845f3f"
       }).siblings().css({
           borderColor:"#ececec"
       })
   }

   move(i){
        var that=this;
        this.spicInner.animate({
            top:-that.index*(that.spicInner.children("li").eq(0).outerHeight()+13)
        },200)  
   }
   
   
}


class buyCar{
    constructor(res){
        this.up=$(".up");
        this.down=$(".down");
        this.text=$("#text");
        this.addcart=$(".add_cart");
        this.color=$(".color");
        this.res=res;
        this.i=-1;
        this.index=0;
        this.init();
        this.addEvent();
    }
    // res:[{},{}]
    // [{id:,num:,price:,img:,color:, }]
    init(){
        this.goods=localStorage.getItem("goods")?JSON.parse(localStorage.getItem("goods")):[];
        this.id=location.search.split("=")[1];
        this.down.css("color","#d6d6d6");

    }
    addEvent(){
        var that=this;
        var val=this.text.val();
        this.up.on("click",()=>{
            val++;
            this.text.val(val);
            this.down.css("color","#8c5d3d");
        })
        this.down.on("click",()=>{
            if(this.text.val()==1){
                this.text.val(1);
                
            }else{
                val--;
                this.text.val(val);
                if(this.text.val()==1){
                    this.down.css("color","#d6d6d6");
                }
            }

        })
       
       
        this.addcart.on("click",()=>{
            this.val=this.text.val();
            var flag=this.goods.some((val,index)=>{
                this.index=index;
                return this.goods[index].id==this.id;
            })
            if(flag){
                  this.goods[this.index].num=parseInt(this.goods[this.index].num)+parseInt(this.val) ;
            }else{
                this.goods.push({
                    id:this.id ,
                    num:this.val,
                    msg:this.getData()
                })
            }
            localStorage.setItem("goods",JSON.stringify(this.goods));

            this.display();
        })
    }
    display(){
        $(".toast").css("opacity","1");
        setTimeout(() => {
        $(".toast").css("opacity","0");
            
        }, 500);

    }
    getData(){
        for(var i=0;i<this.res.length;i++){
            if(this.res[i].id==this.id){
                return this.res[i];
            }
        }
        return {};
    }

}
class requestData{
    constructor(){
        this.url="http://localhost:1000/data/detail.json"
        this.bigImg=$(".bigImg");
        this.spicInner=$(".spic_inner");
        this.rightXq=$(".right_xq_top");
       
        this.getData();

    }
    getData(){
        this.id=location.search.split("=")[1];
        this.ajax();
    }
    ajax(){
        var that=this;
        $.ajax({
            "url":this.url,
            success:function(res){
                that.res=res;
                that.display();
                new detail();
                new buyCar(that.res);
            }
        })
    }
    display(){
        var that=this;
        var str="";
        this.res.forEach(function(val,index){
            if(val.id==that.id){
                that.bigImg=$(".bigImg");
                // 放置大图
                that.bigImg.html(
                    `<img src=${val.img[0]}> `
                );
                // 放置小图
                for(var i=0;i<val.img.length;i++){
                    str+=` <li> <img src=${val.img[i]} alt=""></li>`;
                }
                that.spicInner.html(str);
                str="";
                // 放置标题
                that.rightXq.html(
                    ` <h2>${val.title}</h2>
                    <p>${val.xq}
                        <span>${val.dy}</span>
                    </p>`
                );
                $(".price").html(
                    `<span class="sj msg_tit">售价</span>
                    <em>￥</em>
                    <i>${val.price}</i>
                    <em>${val.qi}</em>

                    <em class="line-through">
                        ${val.yj}
                    </em>
                    <span class="xq_tj" >${val.tj}</span> `
                ) ;
                for(var i=0;i<val.service.length;i++){
                    str+=`<p>
                    <span class="iconfont icon-dh"></span>
                    <span class="word">${val.service[i]}</span>
                </p> `;
                }
                $(".right_service").html(str);
                str="";
                if(val.color!=""){
                    str+=`<span class="ys msg_tit">颜色</span>`;
                    for(var i=0;i<val.color.length;i++){
                        str+=` <i>${val.color[i]}</i>
                        `;
                    }
                }
                $(".color").html(str);
                str="";
                for(var i=0;i<val.bigImg.length;i++){
                    str+=`
                    <img src=${val.bigImg[i]} alt="">
                    `
                }
                $(".imgBox").html(str);
                str="";
                for(var i=0;i<val.other.length;i++){
                    str+=`
                    <div class="re_sbox">
                    <img src=${val.other[i].dpImg} alt="">
                    <p>${val.other[i].title}</p>
                    <div class="re_word">
                        <p>${val.other[i].reword}</p>
                        <span>${val.other[i].price}</span>
                    </div>
                </div>
                    `;
                }
                $(".re_content").html(str);
                str="";
                $(".dp").html(`
                <div class="imgbox">
                    <img src="${val.dp.img}" alt="">
                    </div>
                    <div class="dpcontent">
                        <p class="dpname">${val.dp.dpname}</p>
                        <p class="description" >${val.dp.des}</p>
                    </div>

                    <div class="enter">
                        进入
                    </div>
                `);


                

            }
        })
    }
}
new requestData();

class clickToList{
    constructor(){
        this.aLi=$(".lb");
        this.a=this.aLi.children("a");
        this.aList=$(".biglist_con").children("ul");
        this.init();
        this.addEvent();
    }
    init(){
        // 给每个li加一个标志
        for(var i=0;i<this.aLi.length;i++){
            this.aLi.eq(i).attr("index",i);
        }
    }
    addEvent(){
        var that=this;
        for(var i=0;i<this.a.length;i++){
            this.a.eq(i).on("click",function(){
                that.index=$(this).parent().attr("index");
                that.aContent=$(this).html();
                that.storage={
                    "index":that.index,
                    "content":that.aContent
                }
                localStorage.setItem("listContent",JSON.stringify(that.storage));
                location.href="pages/list.html";
            })
        }
         
    }

}
var c=new clickToList();
